<template>
  <div class="app-container">
    <ehead index="3"></ehead>
    <uploads type="图片"></uploads>
    <div style="background-color: rgb(239 239 239 / 40%)" class="p-10 c my-10">
      <div class="content">
        <div
          class="text-center"
          style="font-size: 30px; font-weight: 800; line-height: 42px; color: rgb(16 16 16 / 100%)"
        >
          扫码查看图片及更多内容
        </div>
        <div class="text-center mt-4" style="font-size: 18px; color: rgb(86 85 85 / 100%)">
          可添加多张图片，支持图片铺满或轮播展示样式，支持jpg，jpeg，png，gif， bmp 格式图片
        </div>
        <el-row class="mt-10">
          <el-col :span="12">
            <div class="">
              <div class="m-2" style="font-size: 20px; font-weight: 600">图片样式任意切换</div>
              <div class="m-2">
                可切换图片置顶或者全屏铺满，<br />
                可以根据用户的需求在不同的模式之间切换。
              </div>
              <div class="m-2 mt-8" style="font-size: 20px; font-weight: 600">可展示多张图片，平铺或轮播</div>
              <div class="m-2">
                上传一系列图片时，可根据图片的顺序将它们上下拼接展示，或者左右轮播展示，为您带来流畅的视觉体验。<br />
                也可以选择手动轮播这些图片，或者设置一个时间间隔，让图片自动轮播。
              </div>
              <div class="m-2 mt-8" style="font-size: 20px; font-weight: 600">可灵活组合图文、音视频、表格等内容</div>
              <div class="m-2">自由选择多种组件，轻松修改内容排版，更改配色等，让内容展示更美观。</div>

              <div class="m-2 mt-8" style="font-size: 20px; font-weight: 600">关联表单，替代纸质表格管理工作任务</div>
              <div class="m-2">
                可出入登记、签到、报名等，而且还能迅速收集数据，大大提升了工作效率。<br />
                同样适用于诸如设备巡检、维保和区域巡查等应用场景。通过关联表单，工作人员可以实时记录设备的状态和巡检结果，确保每一项工作都能得到及时的跟进和处理。同时，对于区域巡查，关联表单也能帮助管理者详细记录各个区域的状况，便于后续的分析和改进。
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-col :span="12">
                <img
                  src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/pc/img/%E5%9B%BE%E7%89%87%206%401x.png"
                  style="width: 228px; height: 333px; margin: 0 auto"
                />
              </el-col>
              <el-col :span="12">
                <img
                  src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/pc/img/%E5%9B%BE%E7%89%87%207%401x.png"
                  style="width: 228px; height: 333px; margin: 0 auto"
                />
              </el-col>
            </el-row>
            <el-row style="margin-top: 20px">
              <el-col :span="12">
                <img
                  src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/pc/img/%E5%9B%BE%E7%89%87%208%401x.png"
                  style="width: 228px; height: 333px; margin: 0 auto"
                />
              </el-col>
              <el-col :span="12">
                <img
                  src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/pc/img/%E5%9B%BE%E7%89%87%209%401x.png"
                  style="width: 228px; height: 333px; margin: 0 auto"
                />
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </div>
    <div style="background-color: rgb(255 255 255 / 100%)" class="p-10 c my-10">
      <div class="content">
        <div
          class="text-center"
          style="font-size: 30px; font-weight: 800; line-height: 42px; color: rgb(16 16 16 / 100%)"
        >
          根据业务需求，自由组合内容和功能，创建专属二维码
        </div>
        <div class="text-center mt-4" style="font-size: 18px; color: rgb(86 85 85 / 100%)">
          快速搭建二维码应用，解决你的各类问题
        </div>
        <div>
          <el-row class="mt-10">
            <el-col :span="8">
              <div
                style="
                  width: 281px;
                  height: 188px;
                  padding: 20px;
                  margin: 0 auto;
                  background-color: rgb(255 255 255 / 100%);
                  border-radius: 6px;
                  box-shadow: 0 2px 6px 0 rgb(0 0 0 / 40%);
                "
              >
                <div style="font-size: 20px; font-weight: 800; color: rgb(86 85 85 / 100%); text-align: center">
                  教育培训
                </div>
                <div style="margin-top: 20px; font-size: 18px; color: rgb(86 85 85 / 100%); text-align: left">
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 学生扫码查看教学资料，课程视频，播放英语听力。
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div
                style="
                  width: 281px;
                  height: 188px;
                  padding: 20px;
                  margin: 0 auto;
                  background-color: rgb(255 255 255 / 100%);
                  border-radius: 6px;
                  box-shadow: 0 2px 6px 0 rgb(0 0 0 / 40%);
                "
              >
                <div style="font-size: 20px; font-weight: 800; color: rgb(86 85 85 / 100%); text-align: center">
                  产品说明
                </div>
                <div style="margin-top: 20px; font-size: 18px; color: rgb(86 85 85 / 100%); text-align: left">
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;消费者扫码了解产品详情，使用安装视频等。
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div
                style="
                  width: 281px;
                  height: 188px;
                  padding: 20px;
                  margin: 0 auto;
                  background-color: rgb(255 255 255 / 100%);
                  border-radius: 6px;
                  box-shadow: 0 2px 6px 0 rgb(0 0 0 / 40%);
                "
              >
                <div style="font-size: 20px; font-weight: 800; color: rgb(86 85 85 / 100%); text-align: center">
                  旅游景点介绍
                </div>
                <div style="margin-top: 20px; font-size: 18px; color: rgb(86 85 85 / 100%); text-align: left">
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;游客扫码获取景区景点介绍，播放相关音视频。
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div style="background-color: rgb(239 239 239 / 40%)" class="p-10 c my-10">
      <div class="content">
        <div
          class="text-center"
          style="font-size: 30px; font-weight: 800; line-height: 42px; color: rgb(16 16 16 / 100%)"
        >
          免费即可使用，通过更多应用案例快速创建
        </div>
        <div class="text-center mt-4" style="font-size: 18px; color: rgb(86 85 85 / 100%)">
          我们整理了用户的真实使用案例，并做成了模板，你可以修改内容，快速创建你的二维码
        </div>
        <div class="text-center mt-10">
          <a href="/v3">
            <el-button
              class="mt-10"
              color="#333333"
              size="large"
              style="width: 140px; height: 50px; margin: 0 auto; font-size: 16px"
              >立即使用</el-button
            >
          </a>
        </div>
      </div>
    </div>
    <efoot></efoot>
  </div>
</template>

<script setup>
import uploads from '@/views/components/index/upload.vue';
import ehead from '@/views/components/index/head.vue';
import efoot from '@/views/components/index/foot.vue';
onMounted(() => {});
</script>
<style scoped lang="less">
.content {
  width: 1200px;
  margin: 0 auto;
}
.c {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 60px 20px;
  min-width: 1200px;
}
</style>

